<template>
  <div class="infinite-scroll-container">
    <List
      v-model:loading="loading"
      :finished="finished"
      loading-text="加载中..."
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="scroll-list">
        <div v-for="item in list" :key="item">
          {{ item }}
        </div>
      </div>
    </List>
  </div>
</template>

<script>
// 可参考vant List组件更详细
import { List } from 'vant'
import { defineComponent, ref } from 'vue'
export default defineComponent({
  components: {
    List
  },
  setup() {
    // 目前vant4组件存在数量太少没有滚动条无法触发下拉onLoad事件
    const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const load = ref(false)
    const onLoad = () => {
      if(load.value) return
      load.value = true
      console.log('1')
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          list.value.push(list.value.length + 1);
        }

        // 加载状态结束
        loading.value = false;

        // 数据全部加载完成
        if (list.value.length >= 40) {
          finished.value = true;
        }
        load.value = false
      }, 1000);
    };

    return {
      list,
      onLoad,
      loading,
      finished,
    };}
})
</script>
<style lang="less" scoped>
.infinite-scroll-container {
  height: 100vh;
  .scroll-list {
    > div {
      height: 80px;
      text-align: center;
      line-height: 80px;
    }
  }
}
</style>
